<template>
  <div>
    <el-button
      @click="onShow"
      class="verificationPic"
      :disabled="props.picDisabled"
    >
      {{ props.picDisabled ? "验证成功" : "开始验证" }}
    </el-button>
    <Vcode
      :show="isShow"
      @success="onSuccess"
      @close="onClose"
      @fail="onFail"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import Vcode from "vue3-puzzle-vcode";

const props = defineProps({
  picDisabled: {
    type: Boolean,
    default: false
  }
})
const isShow = ref(false);

const emit = defineEmits(['setVerifyCode'])
const onShow = () => {
  isShow.value = true;
};

const onClose = () => {
  isShow.value = false;
};

const onSuccess = () => {
  emit('setVerifyCode', true);
  onClose(); // 验证成功，需要手动关闭模态框
};

const onFail = () => {
  emit('setVerifyCode', false)
}
</script>
<style lang="less" scoped>
@import "./index.less";
</style>